import React, { Component } from 'react'

export default class Tab extends Component {
    state = {
        tab: ["Tab1", "Tab2", "Tab3"],
        // 如果是数组 ==> 展开
        con: ["语文", "数学", "英语"],
        count: 0,
        // 数字类型  字符串类型 ==> 直接输出
        num: 88888,
        str: "9999999",
        // 布尔值 ==>  不展示
        flag: true,
        // 对象不能作为react的一个子元素
        obj: {
            name: "张三",
            age: 18
        },
        // arr2: [
        //     {
        //         name: "张三"
        //     },
        //     {
        //         name: "李四"
        //     }
        // ]
    }
    changeCount = (count) => {
        this.setState({
            count
        })
    }
    render() {
        const { tab, count, con, num, str, flag, obj, arr2 } = this.state
        return (
            <div>
                <div className = "header">
                    {
                        tab.map((item, index) => {
                            return <span onClick = { () => {
                                this.changeCount(index)
                            }} className = { index === count? "active": ""} key = { index }>
                                { item }
                            </span>
                        })
                    }
                </div>
                <div>
                    { con[count] }
                </div>
                {/* { arr2 } */}
            </div>
        )
    }
}
